<div *ngIf="workflowRunData && workflowRunData['id']" class="workflow-run">
    <app-workflow-run-summary [(direction)]="direction" [project]="project"
        [class.above]="workflowRunData['status'] === pipelineStatusEnum.PENDING">
    </app-workflow-run-summary>
    <nz-row *ngIf="displayError">
        <nz-col [nzOffset]="2" [nzSpan]="20">
            <nz-collapse *ngIf="workflowRunData['infos']">
                <ng-container *ngFor="let info of workflowRunData['infos']; let first = first">
                    <nz-collapse-panel [nzActive]="first" *ngIf="info.type === 'Error'" [nzHeader]="headerTmpl">
                        <ng-template #headerTmpl>
                            <i nz-icon nzType="warning" nzTheme="fill" class="header"></i>
                            <span *ngIf="!errorsMap[info.message.id]">{{info.message.id}}</span>
                            <span *ngIf="errorsMap[info.message.id]">{{errorsMap[info.message.id].title |
                                translate}}</span>
                        </ng-template>
                        <div>
                            <p>
                                {{info.user_message}}. <span
                                    *ngIf="errorsMap[info.message.id] && errorsMap[info.message.id].description">{{errorsMap[info.message.id].description
                                | translate}}</span>
                            </p>
                            <p>
                                <span *ngIf="errorsMap[info.message.id] && errorsMap[info.message.id].link">
                                    <i nz-icon nzType="book" nzTheme="outline"></i>{{'common_find_help' | translate}}
                                    <a target="_blank" rel="noopener noreferrer" [href]="errorsMap[info.message.id]?.link">{{'common_here' | translate}}</a>.
                                </span>
                            </p>
                        </div>
                    </nz-collapse-panel>
                </ng-container>
            </nz-collapse>
        </nz-col>
    </nz-row>
    <nz-row *ngIf="warnings && warnings.length > 0">
        <nz-col [nzOffset]="2" [nzSpan]="20">
            <!-- Warning PANEL -->
            <nz-collapse>
                <ng-container *ngFor="let info of warnings; let first = first">
                    <nz-collapse-panel [nzActive]="first" [nzHeader]="headerWarnTmpl">
                        <ng-template #headerWarnTmpl>
                            <i nz-icon nzType="warning" nzTheme="fill" class="header warning"></i>
                            <span *ngIf="warningsMap[info.message.id]">{{warningsMap[info.message.id].title |
                                translate}}</span>
                            <span *ngIf="!warningsMap[info.message.id]">{{info.message.id}}</span>
                        </ng-template>
                        <div>
                            <p>
                                {{info.user_message}}.
                            </p>
                            <p *ngIf="warningsMap[info.message.id]">
                                <i nz-icon nzType="book" nzTheme="outline"></i>{{'common_find_help' | translate}}
                                <a target="_blank" rel="noopener noreferrer" [href]="warningsMap[info.message.id].link">{{'common_here' | translate}}</a>
                            </p>
                        </div>
                    </nz-collapse-panel>
                </ng-container>
            </nz-collapse>
        </nz-col>
    </nz-row>
    <nz-row *ngIf="workflowRunData && workflowRunData['read_only']">
        <nz-col [nzOffset]="2" [nzSpan]="20">
            <nz-collapse>
                <nz-collapse-panel [nzHeader]="headerROTmpl">
                    <ng-template #headerROTmpl>
                        <i nz-icon nzType="warning" nzTheme="outline" class="header info"></i>
                        <span>{{'workflow_run_readonly_title' | translate}}</span>
                    </ng-template>
                    <p>{{'workflow_run_readonly_content' | translate}}</p>
                </nz-collapse-panel>
            </nz-collapse>
        </nz-col>
    </nz-row>
    <div class="graph-wrapper">
        <app-workflow-graph
            *ngIf="workflowRunData['status'] !== pipelineStatusEnum.PENDING && workflowRunData['workflow'] && workflowRunData['workflow'].workflow_data"
            [direction]="direction" [project]="project" [workflowData]="workflowRunData['workflow']">
        </app-workflow-graph>
        <div *ngIf="workflowRunData['status'] === pipelineStatusEnum.PENDING" class="loading">
            <div class="col">
                <ng-container *ngIf="!runDelayed">
                    <div class="sk-fold">
                        <div class="sk-fold-cube"></div>
                        <div class="sk-fold-cube"></div>
                        <div class="sk-fold-cube"></div>
                        <div class="sk-fold-cube"></div>
                    </div>
                    {{'workflow_run_scheduling' | translate }}
                </ng-container>
                <div *ngIf="runDelayed">
                    <i nz-icon nzType="hourglass" nzTheme="outline"></i>
                    {{'workflow_run_delayed' | translate }}
                </div>
            </div>
        </div>
    </div>
</div>
<nz-spin *ngIf="!workflowRunData || !workflowRunData['id']" nzTip="Loading workflow..."></nz-spin>
